<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖拽</title>

  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <a href="https://blog.csdn.net/weixin_41910848/article/details/82218243">原文链接</a>
  <p>一.mousedown、mousemove和mouseup  拖着目标元素在页面任意位置<br>
      如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。<br>
      
      1.onmousedown：鼠标按下事件<br>
      2.onmousemove：鼠标移动事件<br>
      3.onmouseup：鼠标抬起事件<br>
      1、一定要绝对定位，脱离文档流才可以移动。<br>

2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。<br>

3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。<br>
<br>
    移动：通过  a - c 建立鼠标与div的关系，防止鼠标超出div。<br>
    拖拽状态 = 0鼠标在元素上按下的时候{  <br>

      拖拽状态 = 1  <br>
    
      记录下鼠标的x和y坐标  <br>
    
      记录下元素的x和y坐标  <br>
    
      } <br>
    
     鼠标在元素上移动的时候{  <br>
    
      如果拖拽状态是0就什么也不做。  <br>

      如果拖拽状态是1，那么  <br>
    
      元素y = 现在鼠标y - 原来鼠标y + 原来元素y  <br>
    
      元素x = 现在鼠标x - 原来鼠标x + 原来元素x  <br>
    
      }   <br>
    
     鼠标在任何时候放开的时候{  <br>
    
      拖拽状态 = 0  <br>
    
    }<br>
    ————————————————<br>
    版权声明：本文为CSDN博主「Muzilh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。<br>
    原文链接：https://blog.csdn.net/weixin_41910848/article/details/82218243<br>
  </p>
  <div class="box" id="drag" draggable="true"></div>

  <script src="./index.js"></script>
</body>
</html>